<div class="bjui-pageContent">
    <div class="highlight">
        <pre class="prettyprint">
<table id="j_datagrid_tree" data-toggle="datagrid" data-options="{
    width: '100%',
    height: '100%',
    gridTitle: '树状datagrid 示例 ',
    showToolbar: true,
    toolbarItem:'add, cancel, del, save',
    local: 'local',
    dataUrl: '../../json/datagrid/datagrid-tree.json',
    inlineEditMult: false,
    editUrl: '../../json/ajaxDone.json',
    isTree: 'name',
    addLocation: 'last',
    fieldSortable: false,
    columnMenu: false,
    paging: false,
    treeOptions: {
        expandAll: false,
        add: true,
        simpleData: true,
        keys: {
            parentKey: 'parentid'
        }
    },
    dropOptions: {
        drop: true,
        position: 'before',
        dropUrl: '../../json/ajaxDone.json',
        beforeDrag: datagrid_tree_beforeDrag,
        beforeDrop: datagrid_tree_beforeDrop,
        afterDrop: 'array'
    }
}">
    <thead>
        <tr>
            <th data-options="{name:'name', align:'center', width:300, rule:'required'}">角色名称</th>
            <th data-options="{name:'department', align:'center', type:'select', items:datagrid_tree_department}">部门</th>
            <th data-options="{render:datagrid_tree_operation}">操作列</th>
        </tr>
    </thead>
</table>
&lt;script type="text/javascript"&gt;
// department
function datagrid_tree_department() {
    return [{'001':'办公室'},{'002':'财务部'},{'003':'人事部'},{'004':'采购部'},{'005':'市场部'},{'006':'销售部'}]
}
// 操作列
function datagrid_tree_operation() {
    var html = '<button type="button" class="btn-green" data-toggle="edit.datagrid.tr">编辑</button>'
        + '<button type="button" class="btn-red" data-toggle="del.datagrid.tr">删除</button>'
    
    return html
}
//不能拖动一级父节点
function datagrid_tree_beforeDrag(tr, data) {
    if (data && data.level == 0) {
        return false
    }
    
    return true
}
// 不能将子节点拖为一级父节点
function datagrid_tree_beforeDrop(data, targetData, position) {
    if (targetData && targetData.level == 0 && position !== 'append') {
        return false
    }
    
    return true
}
&lt;/script&gt;
        </pre>
    </div>
</div>
<div class="bjui-pageFooter">
    <ul>
        <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
    </ul>
</div>